<template>
   <div>
       <img :src="require('@/assets/state/null.png')" alt="" v-if="SearchResultDetail.length == 0" class="backImage">
       <SearchArticle v-else-if="NaviIndex == 1" class="box flex" :articles="SearchResultDetail" />
       <SearchUser  v-else-if="NaviIndex == 2" class="box flex" :users="SearchResultDetail"/>
       <!-- 分页器 -->
      <Pagination id="Pagination" :PageInfo="SearchInfo" :changePage="changePage" v-if="SearchResultDetail.length > 0 && SearchInfo.total > SearchInfo.length" />
   </div>
</template>
<script>
import Pagination from '@/components/Package/Pagination/Pagination.vue'
import { mapActions, mapMutations, mapState } from 'vuex'
import SearchArticle from './SearchArticle/SearchArticle.vue'
import SearchUser from './SearchUser/SearchUser.vue'
  export default 
  {
  components: { SearchArticle, SearchUser, Pagination },
     name :'', 
     computed:{
      ...mapState('Search',['NaviIndex','SearchResultDetail','SearchInfo'])
     },
     methods: {
       ...mapMutations('Search',['SETSEARCHINFO']),
       ...mapActions('Search',['getSearchResultDetail']),
        changePage(pageNo){
    
            this.SETSEARCHINFO({pageNo})
            this.getSearchResultDetail()
        }
     },
  }
</script>
<style scoped lang='less'>
.box{
   width: 100%;
   justify-content: flex-start;
   padding: 10px;
   box-sizing: border-box;
}
.backImage{
   width: 50%;
   height: 80%;
   position: absolute;
   top: 50%;left: 50%;
   transform: translate(-50%,-50%);
}
</style>